<template>
	<color-header></color-header>
	<view class="header-tab">
		<uni-nav-bar title="我的支付活动订单" left-icon="left" status-bar background-color="transparent" :border="false"
		 @clickLeft="$navTo('',{}, 'navigateBack')"></uni-nav-bar>	
		<tab-nav :nav-list="nav" @nav-tap="navTap"></tab-nav>
	</view>
	<view class="clear-float"></view>
	<view class="order-wrapper" v-if="order.data != false">
		<order-list v-for="(item, index) in order.data" :key="index" :info="item" @del="del(item)" 
		@refund="refund(item)" @refreshData="getOrderList(true)"></order-list>
		<uni-load-more v-if="order.data.length >= 7" :status="loadStatus"></uni-load-more>
	</view>
	<empty-status v-else note="当前无活动订单" src="/static/images/order-empty.png"></empty-status>
	<modal ref="modal"></modal>
</template>

<script>
	import tabNav from './components/tab-nav.vue'
	import orderList from './components/order-list.vue'
	export default {
		components: {
			tabNav,
			orderList,
		},
		data() {
			return {
				nav: [{name: '全部',id: 0},{name: '待付款', id:1},{name: '已付款',id: 2},{name: '退款/售后',id: 3}],
				status: 0,
				order: {
					data: [],
					page: 1,
					hasMore: false
				},
				loadStatus: 'more',
			}
		},
		computed: {
			tabTop() {
				return uni.getWindowInfo().statusBarHeight + 48 + 'px'
			},
			headerHeight() {
				return uni.getWindowInfo().statusBarHeight + 88 + 'px'
			}
		},
		onLoad() {
			this.getOrderList()
		},
		onReachBottom() {
			if (this.order.hasMore) {
				this.loadStatus = 'loading'
				this.order.page += 1
				this.getOrderList()
			} else {
				this.loadStatus = 'noMore'
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '刷新中...',
				mask: true
			})
			this.getOrderList(true)
			setTimeout(() => {
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}, 800)
		},
		methods: {
			// 删除订单
			del(order_item) {
				this.$refs.modal.show({
					cancelText: '取消',
					content: '确认要删除此条活动订单吗？',
					success: async (res) => {
						if (res.confirm) {
							const id = order_item.id
							const result = await this.$request.post('/api/order/del', {id})
							if (result.code == 200) {
								uni.showToast({
									title: '已删除',
									icon: 'none'
								})
								this.getOrderList(true)
							}
						}
					}
				})
			},
			// 申请退款
			refund({ order_no, user_id }) {
				this.$refs.modal.show({
					cancelText: '取消',
					btnDisplay: 'vertical',
					content: '活动很精彩，确定要退出组队吗？',
					success: async (res) => {
						if (res.confirm) {
							const result = await this.$request.post('/api/activity/out_team_by_order_no', {order_no: order_no, user_id: user_id})
							if (result.code == 200) {
								uni.showToast({
									title: '退出组队成功',
									icon: 'none'
								})
								setTimeout(() => {
									this.getOrderList(true)
								}, 200)
							}
						}
					}
				})
			},
			
			// 导航栏点击事件
			navTap(index) {
				this.status = index
				this.getOrderList(true)
			},
			// 获取订单列表
			async getOrderList(refresh = false) {
				const res = await this.$request.get('/api/order/lists',{
					status: this.status,
					page: this.order.page
				},{ load: false })
				if (res.code == 200) {
					this.loadStatus = 'more'
					const list = res.data?.lists || []
					this.order.hasMore = res.data.has_more_page
					if (refresh) {
						this.order.data = list
						this.order.page = 1
					} else {
						this.order.data = this.order.data.concat(list)
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.tab-nav {
		// background-color: #fff;
		position: sticky;
		left: 0;
		top: v-bind(tabTop);
		right: 0;
		z-index: 2;
	}
	.header-tab {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		background: linear-gradient(to right, #CDE0F8, #C3F0F0, #DFF8F0);
		z-index: 2;
		
	}
	.clear-float {
		height: v-bind(headerHeight);
	}
	.order-wrapper {
		padding: 30rpx;
	}
</style>